<template>
  <div class="softInfo">
    <h3>软件基本信息</h3>
    <div class="clear_float" style="display: flex">
<!--      左边的表单-->
      <button @click="UpdateSoftInfo">提交的萨芬给</button>

      <el-form :label-position="labelPosition" label-width="80px" :model="info" class="left" style="flex:1">
        <el-form-item label="软件ID">
          <el-input v-model="info.softId" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="软件名称">
          <el-input v-model="info.softName" style="width: 400px"></el-input>
          <el-form-item label="所属分类">
            <el-cascader
              v-model="value"
              :options="options"
              :props="{ expandTrigger: 'hover',value:'sortId',children:'sortList',label:'sortName'}"
              placeholder="请选择栏目"
              style="margin-left: 60px;"
              :show-all-levels="false"
              :size="'medium'"
            >
            </el-cascader>
          </el-form-item>
        </el-form-item>
        <el-form-item label="软件语言">
          <el-input v-model="info.language" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="软件大小">
          <el-input v-model="info.softSize" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="版本信息">
          <el-input v-model="info.edition" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="支持平台">
          <el-input v-model="info.platform" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="发布者ID">
          <el-input v-model="info.userId" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="info.createTime" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="info.updateTime" style="width: 400px"></el-input>
        </el-form-item>
      </el-form>
<!--      右边的表单-->
      <el-form :label-position="labelPosition" label-width="80px" :model="info" class="right" style="flex:1">
        <el-form-item label="软件logo">
          <div class="logo">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccessLogo"
            >
              <img v-if="info.softLogo" :src="info.softLogo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="软件界面">
          <div class="view">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccessView"
            >
              <img v-if="info.showPic" :src="info.showPic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="下载地址">
          <el-input v-model="info.softAddr" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="下载次数">
          <el-input v-model="info.downloads" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
            <template slot-scope="scope">
              <el-select v-model="scope.row.verify" >
                <el-option
                  v-for="(item) in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
<!--            <el-option-->
<!--              v-for="(item) in options2"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--            >-->
<!--            </el-option>-->
        </el-form-item>
        <el-form-item label="简短介绍">
          <textarea name="" id="" class="briefInfo" v-model="info.briefIntro"></textarea>
        </el-form-item>
      </el-form>
    </div>
    <!--    安装步骤 软件反馈-->
    <div class="bottomBox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
<!--        安装步骤-->
        <el-tab-pane label="安装步骤" name="first">
          <mavon-editor v-model="info.installProRight" style="min-height:500px;border:1px solid #c0c4cc;"/>
        </el-tab-pane>
<!--        软件反馈-->
        <el-tab-pane label="软件反馈" name="second">
          <ul v-for="item in info.feedbackList">
            <li>
              <p>王小虎<span>反馈时间：2020-2-10</span></p>
              <p>还不错</p>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import vue from 'vue'
  import mavonEditor from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  vue.use(mavonEditor)

  export default {
    name: 'softwareInfo',
    data() {
      return{
        value:"",
        mavonValue:"",
        // logo:"",
        // view:"",
        info:{
          softName:'',
          parentId:'',
          language:'',
          softSize:'',
          edition:'',
          platform:'',
          // userId,
          createTime:'',
          updateTime:'',
          softLogo:'',
          showPic:'',
          softAddr:'',
          downloads:'',
          verify:'',
          briefIntro:'',
          installProRight:'',
          installProLeft:''
        },
        labelPosition: 'right',
        options2: [{
          value: 0,
          label: '暂不审核'
        }, {
          value: 1,
          label: '通过'
        }, {
          value: 2,
          label: '不通过'
        }],
        activeName: 'first'
      }
    },
    created() {
      this.getSoftInfo();
    },
    methods:{
      //logo
      handleAvatarSuccessLogo(res, file) {
        this.logo = URL.createObjectURL(file.raw);
      },
      //界面
      handleAvatarSuccessView(res, file) {
        this.view = URL.createObjectURL(file.raw);
      },
      //tab切换
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //获取数据
      getSoftInfo() {
        this.$http({
          url: this.$http.adornUrl('/generator/software/detail'),
          method: 'post',
          data:{
            softId:this.$route.query.softId
          }
        }).then((res) => {
          this.info=res.data.detaiData;
          this.options=this.info.parentList;
          this.info.parentId[0]=0;
          this.info.parentId[1]=1;
          this.value=this.info.parentId;
          console.log(res);
        })
      },
      //提交修改后的数据
      UpdateSoftInfo() {
        this.$http({
          url: this.$http.adornUrl('/generator/software/detailUpdate'),
          method: 'post',
          data:{
            softId:this.$route.query.softId,
            softName:this.info.softName,
            // parentId:this.info.parentId,
            // language:this.info.language,
            // softSize:this.info.softSize,
            // edition:this.info.edition,
            // platform:this.info.platform,
            // userId:this.info.userId,
            // createTime:this.info.createTime,
            // updateTime:this.info.updateTime,
            // softLogo:this.info.softLogo,
            // showPic:this.info.showPic,
            // softAddr:this.info.softAddr,
            // downloads:this.info.downloads,
            // verify:this.info.verify,
            // briefIntro:this.info.briefIntro,
            installProRight:this.info.installProRight,
          installProLeft:this.info.installProLeft
          }
        }).then((res) => {
          // this.info=res.data.detaiData;
          // this.options=this.info.parentList;
          // this.info.parentId[0]=0;
          // this.info.parentId[1]=1;
          // this.value=this.info.parentId;
          console.log(res);
        })
      }
    }
  }
</script>

<style>
  .softInfo .el-tabs__item{
    height: 25px;
  }
  .softInfo .el-tabs__nav-wrap::after {
    background-color: transparent!important;
  }
  .softInfo .el-tabs__item.is-active{
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #666;
  }
  .softInfo .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
    z-index: 1;
  }
</style>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .logo .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .view .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 130px;
    line-height: 130px;
    text-align: center;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
  }
  .softInfo{
    padding-left: 100px;
  }
  .softInfo textarea{
    border: 1px solid #d9d9d9;
    resize: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 25px;
  }
  .softInfo textarea::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .briefInfo{
    width: 400px;
    height: 136px;
  }
  .softInfo .bottomBox ul>li{
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 20px;
  }
  .softInfo .bottomBox ul>li>p{
    margin-top: 20px;
  }
  .softInfo .bottomBox ul>li>p>span{
    margin-left: 20px;
  }
  .softInfo .bottomBox ul>li>p:nth-child(2){
    margin-top: 10px;
  }
  .softInfo .bottomBox ul>li:last-child{
    border-bottom:none;
  }
</style>
